<template>
	<view class="n-table-title">
		<view class="tableHeadBox">
			<view class="table-head-firstColumn">
				<text>{{ currentMonth.month }}</text>
				<text>{{ currentMonth.year }}</text>
			</view>
			<block v-for="(item, index) in tableColumns" :key="index">
				<view class="table-head-column" :class="[{ today: item.isToday == true },{ holiday: item.isHoliday == true }]">
					<text>{{ item.day }}</text>
					<text>{{item.isToday ?'今日': item.week }}</text>
					<text v-if="item.isHoliday">{{item.holidayName}}</text>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
import dateTimeUtils from '@/utils/dateTimeUtils.js';
export default {
	name: '',
	data() {
		return {
			currentMonth: {}
		};
	},
	props: {
		tableColumns: {
			type: Array,
			default() {
				return [];
			}
		}
	},

	mounted() {
		this.currentMonth = dateTimeUtils.getCurrentMonth();
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
@import './pbTable.css';
.n-table-title {
	// position: sticky;
	// top: 0;
	// left: 0;
	// z-index: 9;
	// width: 100%;
	// display: flex;
	// justify-content: flex-start;
	// background-color: #FAFAFA;
	background-color: #fff;
	padding: 22rpx 22rpx 0;
}
.tableHeadBox {
	// z-index: 9;
	width: 100%;
	display: flex;
	justify-content: flex-start;
	background-color: #fafafa;
	border-top: 1rpx #F0F0F0 solid;
	border-left: 1rpx #F0F0F0 solid;
}
.header-sticky {
	position: sticky;
	left: 0;
	z-index: 9;
}
.today {
	color: #1673ff;
	font-size: 24rpx;
}
.holiday {
	color: red;
	font-size: 24rpx;
}
</style>
